<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>tablePlug</title>
  <link rel="stylesheet" href="layui/src/css/layui.css" media="all">
 
</head>
<body>
<table class="layui-hide" lay-id="demo2" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container layui-inline">
    <span class="layui-btn layui-btn-sm" lay-event="getChecked">获得选中的数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="getCheckedStatus">获得选中的状态</span>
    {{# if(d.checkStatus) {}}
    <span class="layui-btn layui-btn-sm" lay-event="deleteSome">批量删除</span>
    {{# } }}
    {{# if(d.id === 'demo'){ }}
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="jump" data-page="1">第1页</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="jump" data-page="2">第2页</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reload" data-url="data_none">无数据</span>
    {{# } }}
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload">重载</span>
  </div>
  <div class="layui-inline">
    {{# if(d.id === 'demo'){ }}
    <span><span style="color: red;">※</span>url模式测试用的是json文件所以翻页请用这里按钮，不要用table的中的laypage组件，实际开发中不会有这个问题</span>
    {{# } else {}}
    <span>data模式测试</span>
    {{# } }}
  </div>
</script>

<script src="layui/src/layui.js"></script>
<script src="layui/src/jquery-3.3.1.min.js"></script>
<script>
  var data_json="";
	
	     
	$.post("http://localhost:86/HBuilder/xops/Back.php",
	{
			 	 type:"User",
			 	 operation:"search",
				 curr:1,
				 nums:10,
			 	 token:"1ab66e59325257b60b971d4afa1505ce"
			 },function(data,status){
			 	// alert("data:"+(data));
			 	data_json=JSON.parse(data);
			 data_json=data_json["data"];
		
			 })
  layui.config({base: 'test/js/'}).use(['testTablePlug'], function () {
    var $ = layui.jquery
      , layer = layui.layer //弹层
      , form = layui.form //弹层
      , table = layui.table //表格
      , tablePlug = layui.tablePlug; //表格插件

    // 当前这个测试页面测试的重点不是智能重载，所以关掉该功能，实际上该功能也是默认关闭的，可以不执行下面这句代码，也可以强制指定。
    tablePlug.smartReload.enable(false);

    // 处理操作列
    var fn1 = function (field) {
      return function (data) {
        return data[field];
      };
    };
   
   
   
    table.render({
      // elem: '#demo2'
      elem: '[lay-id="demo2"]'
      // , height: 'full-200'
      // , url: 'json/data11.json' //数据接口
      , data: data_json
	
      , title: '用户表'
      , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
							layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', "refresh"] //自定义分页布局
								,
							curr: 1 //设定初始在第 5 页
								,
							groups: 5 //只显示 1 个连续页码
								,
							first: true //不显示首页
								,
							last: true //不显示尾页
	
						}
      // , page: false
      , limit: 10
      , loading: true
      , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      , totalRow: true //开启合计行
      , cellMinWidth: 90
      // , autoSort: false // 不进行前端排序
      , done: function (res, curr, count) {
		  // data[0]['id']="ff";
        var tableView = this.elem.next();
        var totalRow = tableView.find('.layui-table-total');
        var limit = this.page ? this.page.limit : this.limit;
        layui.each(totalRow.find('td'), function (index, tdElem) {
          tdElem = $(tdElem);
          var text = tdElem.text();
          if (text && !isNaN(text)) {
            text = (parseFloat(text) / limit).toFixed(2);
            tdElem.find('div.layui-table-cell').html(text);
          }
        });
					  console.log("res:",res);
				
				//得到当前页码
				console.log("curr",curr); 
				
				//得到数据总量
				console.log("co",count);
		
				
      },
			parseData: function (ret) {
			  return {
			    code: ret.code,
			    // msg: ret.msg,
			    count: ret.count,
			    data: ret.data 
			  }
			}
      // 定制当前数据的主键字段，默认为id，
      , primaryKey: 'id'
      // 是否开启复选列状态记录 支持true/false/{} true的情况下primaryKey默认为id，default默认为[]
      // primaryKey: 'username', // 可以定义成其他的字段，但是有一个要求，就是这个字段的值必须有唯一性约束，这个是一个判断记录是否相同重要的条件
      , checkStatus: {
        // 原始已经选中的记录的主键值集合
        default: []
      }
      , checkDisabled: {
        enabled: true,
        data: []
      }
      ,					cols: [
							[
								{
										type: 'numbers',
									fixed: 'left',
										title: '序号',
										// LAY_CHECKED: true
									},
									{
									type: 'checkbox',
									id: "ee",
									fixed: 'left',
									// LAY_CHECKED: true
								}, {
									field: 'id',
									title: 'ID',
									width: 80,
									fixed: 'left',
									unresize: true,
									sort: true,
															
									fixed: 'left',
										// minWidth: 500,
									// event:'ddd',
									
								}, {
									field: 'account',
									title: '用户名',
									minWidth: 120,
									width:'15%',
									edit: 'text',
									fixed: 'left',
							
								}
						
								, {
									field: 'password',
									title: '密码',
									minWidth: 120,
									width:'15%',
									edit: 'text',
									fixed: 'left',
									
									sort: true
								}
								, {
									field: 'tel',
									title: '电话',
									width: '15%',
									minWidth:120,
									edit: 'text',
									fixed: 'left',
									sort: true
								}, {
									field: 'datetime',
									title: '注册时间',
									minWidth: 150,
									width:'15%',
									edit: 'text',
									fixed: 'right',
								    minWidth:120,
									sort: true,
									}
								// }, {
        //     fixed: 'right',
        //     type: 'toolbar',
        //     field: 'toolbar_common',
        //     title: '操作1',
        //     width: 190,
        //     align: 'right',
        //     // toolbar: '#barDemo',
        //     // rowspan: 2
        //   }
								
						
        ]
      ]
    });

    $(document).on('click', '.layui-table-view .layui-table-body tr', function (event) {
      var trElem = $(this);
      var tableView = trElem.closest('.layui-table-view');
      tableView.find('.layui-table-body tr.table_tr_click').removeClass('table_tr_click');
      tableView.find('.layui-table-body tr[data-index="' + trElem.data('index') + '"]').addClass('table_tr_click');
    })

  });
</script>
</body>
</html>
